<template>
  <div class="block">
    <el-timeline class="top" id="mark">
      <el-timeline-item v-for="(item, index) in checkList" :key="index">
        <div class="item">
          <div class="info">
            <el-avatar class="img" size="medium">
              <span class="bg">
                <div>{{item.updateByName}}</div>
              </span>
            </el-avatar>
            <span class="checkUser">
            <span class="name">{{item.updateByName}}</span>
            <span class="time">{{ item.updateTime }}</span>
            </span>
          </div>
          <div class="content">
            <span :class="{ checkResults: !item.result }">
              {{
              item.result ? "合格" : "不合格"
              }}
            </span>
            {{ item.opinion ? "，" + item.opinion : "" }}
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <div class="check" v-if="showCheck">
      <template>
        <span>抽查结果：</span>
        <el-radio v-model="checkResults" label="1">合格</el-radio>
        <el-radio class="red-text" v-model="checkResults" label="0">不合格</el-radio>
      </template>
    </div>
    <div class="bottom" v-if="showCheck">
      <el-input
        id="markInput"
        ref="mark"
        type="textarea"
        placeholder="请输入抽查意见"
        v-model="opinion"
        rows="4"
        @keyup.enter.native="saveCheck"
      ></el-input>
      <el-button class="btn-text-blue btn" @click="saveCheck">发表</el-button>
    </div>
  </div>
</template>
<script>
import {
  addCheck,
  getCheckInfo,
  queryList
} from "@/api/orderManagement/spotCheck";
export default {
  props: {
    showCheckRecord: {
      type: Boolean,
      default: true
    },
    orderData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      userWeight: "",
      lastWeight: -1,
      showCheck: true,
      checkResults: "1", // 抽查结果
      opinion: "",
      checkId: "",
      checkList: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getCheckList();
      this.judgeCanCheck();
      //判断是否可以填写抽查
    },
    judgeCanCheck() {
      let form = {
        account: this.userInfo.account
      };
      queryList(form).then(res => {
        if (res.data) {
          let list = res.data.list || [];
          this.userWeight = list[0].workPrior;
          // console.log(this.userWeight , this.lastWeight)
          if (this.userWeight >= this.lastWeight) {
            //可以填写
            this.showCheck = true;
          } else {
            //不可填写
            this.showCheck = false;
          }
        }
      });
    },
    // 提交抽查结果（发表按钮或Enter）
    saveCheck() {
      let data = {
        result: parseInt(this.checkResults),
        opinion: this.opinion,
        orderCode: this.orderData.code,
        orderId: this.orderData.id,
        weight: this.userWeight
      };
      addCheck(data).then(res => {
        if (res.code == 200) {
          this.$message.success(res.description);
          this.opinion = "";
          this.getCheckList();
          this.$refs.mark.focus();
          this.$utils.updateStorage();
        }
      });
    },
    // 获取抽查信息
    getCheckList() {
      let form = {
        orderId: this.orderData.id
      };
      getCheckInfo(form).then(res => {
        this.checkList = res.data || [];
        if (this.checkList.length > 0) {
          this.lastWeight = this.checkList[this.checkList.length - 1].weight;
        }
        this.lastWeight = -1;
      });
    },
    doClose() {
      this.$emit("update:showCheckRecord", false);
    }
  }
};
</script>
<style lang="less" scoped>
.block {
  // width: calc(100% - 100px);
  .top {
    height: 400px;
    max-height: 430px;
    overflow: auto;
    padding-top: 15px;
    border-top: 1px solid #d7d7d7;
    /deep/.el-timeline-item__node--normal{
      left:0px;
    }
    .item {
      padding-left: 30px;
      .info {
        color: #000;
        height: 25px;
        line-height: 25px;
        .img {
          position: relative;
          right: 80px;
          bottom: 10px;
          background: #d5e4fd;
        }
        .name,
        .time {
          position: relative;
          bottom: 23px;
          right: 80px;
          padding: 10px;
        }
        .time {
          color: #7f7f7f;
        }
      }
      .content {
        padding-left: 3px;
        text-align: left;
        color: #7f7f7f;
        .checkResults {
          color: #f42c2c;
        }
      }
    }
  }
  .check {
    border-top: 1px solid #d7d7d7;
    padding: 20px 2px;
    text-align: left;
    /deep/ .red-text .el-radio__label {
      color: #f42c2c;
    }
  }
  .bottom {
    height: 140px;
    .btn {
      position: absolute;
      bottom: 25px;
      right: 25px;
      width: 63px;
      height: 26px;
      padding: 6px 10px;
    }
  }
}
</style>